<!--
 * @Author: lirl
 * @Date: 2022-08-10 15:55:03
 * @Description: 快速起草
-->
<template>
  <div>
    <div class="template-list">
      <div
        class="template"
        type="primary"
        v-for="item in list"
        :key="item.processDefinitionKey"
        @click="draftDraft(item)"
      >
        <span>{{ item.processDefinitionName }}</span>
      </div>
    </div>
    <jdf-select-identity
      ref="selectIdentity"
      v-model="selectIdentityId"
      :identity-list="identityList"
      @choose="chooseDraft"
    ></jdf-select-identity>
  </div>
</template>

<script>
import { ProcessService } from 'jdf-jssdk';
import { mapGetters } from 'vuex';
import { bizServiceURL } from '@/api/utils/constants';
import draftMixins from '@/mixins/draftMixins';
import switchIdentItiesMixin from '@/mixins/switchIdentItiesMixin';
import { reject } from 'lodash-es';
import { EXCLUDED_PROCESS_CODES } from '@/utils/constants';

export default {
  mixins: [draftMixins, switchIdentItiesMixin],
  data() {
    return {
      list: [],
      selectIdentityId: '',
      identityList: [],
      template: null,
    };
  },
  computed: {
    ...mapGetters(['loginName', 'identityId'])
  },
  mounted() {
    this.getDraftedList();
  },
  methods: {
    /**
     * 获取流程模板列表
     */
    async getDraftedList() {
      const list = await new ProcessService(bizServiceURL).getTemplateList();
      const excludedKeys = new Set(EXCLUDED_PROCESS_CODES);
      // 剔除掉不需要展示的流程模板
      // 流程模版根据流程的变量sort进行排序
      this.list = reject(list, (item) => excludedKeys.has(item.processDefinitionKey)).map((item) => {
        item.varList?.forEach((varItem) => {
          item[varItem.varName] = varItem.varType === 'number' ? Number(varItem.varValue) : varItem.varValue;
        });
        return item;
      }).sort((a, b) => (a.sort || 0) - (b.sort || 0));
    },
    chooseDraft() {
      const { template } = this;
      this.draftProcess(
        template.processDefinitionKey,
        template.processDefinitionName,
        this.selectIdentityId,
        {},
        '/process-form'
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.template-list {
  padding: 20px;
  display:flex;
  flex-wrap: wrap;
  .template {
    color: #252525;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-bottom: 15px;
    margin-right: 5px;
    position: relative;
    width: calc(25% - 5px);
    line-height: 20px;
    cursor: pointer;
    background-image: linear-gradient(0deg,#fff,#f3f5f8);
    border: 2px solid #fff;
    box-shadow: 8px 8px 20px 0 #cccccc47, -8px -8px 20px 0 #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 25px;
    &:hover {
      box-shadow: 8px 8px 20px 0 #cccccc, -8px -8px 20px 0 #fff;
    }
  }
}
</style>
